<template>
  <div
    class="el-vue-search-box"
    :style="{
      'border-radius':
        searchSize === 'normal' || searchSize === 'newNormal' ? '4px' : '2px',
    }"
    @keydown.up="selectTip('up')"
    @keydown.down="selectTip('down')"
  >
    <div
      class="search-box-wrapper"
      :style="{
        height:
          searchSize === 'normal'
            ? '40px'
            : searchSize === 'newNormal'
            ? '32px'
            : '24px',
        'border-radius':
          searchSize === 'normal' || searchSize === 'newNormal' ? '4px' : '2px',
      }"
    >
      <el-input
        type="text"
        v-model="keyword"
        @keyup.enter="autoComplete"
        class="search-input-new"
        :style="{
          'font-size':
            searchSize === 'normal' || searchSize === 'newNormal'
              ? '14px'
              : '12px',
        }"
        @input="autoComplete"
        @change="changeInput"
        @clear="clearInput"
        @blur="blurInput"
        clearable
        :placeholder="placeTitle"
      />
      <div
        class="search-btn iconfont icon-sousuo"
        :style="{
          width:
            searchSize === 'normal' || searchSize === 'newNormal'
              ? '48px'
              : '29px',
          'font-size':
            searchSize === 'normal' || searchSize === 'newNormal'
              ? '16px'
              : '14px',
          'border-radius':
            searchSize === 'normal' || searchSize === 'newNormal'
              ? '0 4px 4px 0'
              : '0 2px 2px 0',
        }"
        @click="autoComplete"
      ></div>
    </div>
    <div
      class="search-tips"
      :style="{ 'max-height': maxHeight }"
      v-if="tips.length"
    >
      <ul>
        <li
          v-for="(item, index) in tips"
          :key="index"
          @mousedown="changeTip(item)"
          @mouseover="selectedTip = index"
          :c-tip="item.alias"
          class="search-tips-li"
          :class="{ 'autocomplete-selected': index === selectedTip }"
          v-html="searchName(item.alias)"
        >
          <span
            class="auto-item-span"
            v-if="item.region?.province === item.region?.city"
            :c-tip="item.region?.province + item.region?.county"
            >{{ item.region?.province + item.region?.county }}</span
          >
          <span
            class="auto-item-span"
            v-if="item.region?.province !== item.region?.city"
            :c-tip="
              item.region?.province + item.region?.city + item.region?.county
            "
            >{{
              item.region?.province + item.region?.city + item.region?.county
            }}</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {
  keyWordQueryPoi,
  poiContraryGeocodingQuery,
} from "@/utils/openLayerCommon";
export default {
  name: "amap-search-box",
  // props: ['onSearchResult','adCode'],
  props: {
    onSearchResult: {
      type: Function, // 指定类型为函数
      default: () => {
        // 设置默认值为一个空函数
        console.log("onSearchResult default");
      },
    },
    adCode: {
      type: String, // 指定类型为字符串
      default: "", // 设置默认值为字符串
    },
    maxHeight: {
      type: String,
      default: "400px",
    },
    searchSize: {
      type: String,
      default: "normal",
    },
    placeTitle: {
      type: String,
      default: "请输入关键字",
    },
  },
  data() {
    return {
      keyword: "",
      tips: [],
      selectedTip: -1,
    };
  },
  mounted() {
    console.log("placeTitle", this.placeTitle);
  },
  computed: {
    searchName() {
      return function (name) {
        console.log(name);
        if (!name) {
          return "";
        } else {
          let targetName = this.keyword;
          let index = name.indexOf(targetName);
          if (index !== -1 && targetName !== "") {
            return name.replace(
              targetName,
              `<span class='key-words'>${targetName}</span>`
            );
          }
          return name;
        }
      };
    },
  },
  methods: {
    /**
     * 检索
     */
    autoComplete() {
      if (!this.keyword) {
        return;
      }
      keyWordQueryPoi({
        keyWord: this.keyword,
        pageSize: "10",
        pageNum: "1",
        adCode: this.adCode,
      }).then((resp) => {
        this.tips = resp.data?.list || [];
        console.log(this.tips);
        if (this.tips.length > 0) {
          let a = $("#map").height() - 100;
          console.log("mapde高度-------------", a);
          $(".search-tips").css({ height: a });
          $(".search-tips").css({ display: "block" });
        }
      });
    },
    getAddress(lng, lat) {
      let location = lng + "," + lat;
      poiContraryGeocodingQuery({ location: location }).then((resp) => {
        console.log("经纬度转地址的返回", resp);
        if (resp.code === 200 && resp.data.length > 0) {
          const LngLats = {
            lng: lng,
            lat: lat,
            name: resp.data[0].address,
            address: resp.data[0].address,
          };
          this.onSearchResult(LngLats);
          this.keyword = resp.data[0].address;
          this.tips = [];
        } else {
          $message.a(resp);
        }
      });
    },
    /**
     * 定位
     */
    changeTip(tip) {
      let lng = tip?.pois[0]?.location.split(",")[0];
      let lat = tip?.pois[0]?.location.split(",")[1];
      this.getAddress(lng, lat);
    },
    selectTip(type) {
      if (type === "up" && this.selectedTip > 0) {
        this.selectedTip -= 1;
        this.keyword = this.tips[this.selectedTip].alias;
      } else if (type === "down" && this.selectedTip + 1 < this.tips.length) {
        this.selectedTip += 1;
        this.keyword = this.tips[this.selectedTip].alias;
      } else {
        console.log("解决sonar问题");
      }
    },
    changeInput() {
      this.$emit("changeInput");
    },

    clearInput() {
      $(".search-tips").css({ display: "none" });
      console.log("%c █░░░░░░░░░░░░█ ,清空回调", "color: #FAC800");
      this.$emit("clearInput");
    },
    blurInput() {
      $(".search-tips").css({ display: "none" });
    },
  },
};
</script>
<style lang="less">
.el-vue-search-box {
  position: relative !important;
  background: transparent;
  z-index: 10;

  .search-box-wrapper {
    display: flex;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
    line-height: 100%;

    input {
      flex: 1;
      height: 20px;
      line-height: 20px;
      letter-spacing: 0.5px;
      font-size: 14px;
      text-indent: 10px;
      box-sizing: border-box;
      border: none;
      outline: none;
    }

    /deep/ .el-input__inner {
      text-indent: 0 !important;
    }
    .el-input__suffix {
      top: -5px;
    }

    .search-btn {
      width: 48px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ff6a6c !important;
      cursor: pointer;
      color: #ffffff;
      border-radius: 0 4px 4px 0;
    }
  }

  .search-tips {
    top: 100%;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    margin-top: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    border-radius: 4px;

    ul {
      padding: 0;
      margin: 0;

      li {
        height: 40px;
        line-height: 40px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        padding: 0 10px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.autocomplete-selected {
          background: #eee;
        }
      }
    }
  }
  .auto-item-span {
    color: #c1c1c1 !important;
    padding-left: 4px;
  }
  .search-box-wrapper .el-icon-circle-close {
    line-height: 32px !important;
  }
}
</style>
<style lang="scss" scoped>
/deep/ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

/deep/ input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

/deep/ input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

/deep/ input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

.search-box-wrapper /deep/.search-input-new .el-input__inner {
  padding-left: 0;
  font-size: 14px;
}
.search-box-wrapper /deep/ .search-input-new input {
  &::placeholder {
    color: #909399 !important;
    font-size: 14px;
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #909399 !important;
    font-size: 14px;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #909399 !important;
    font-size: 14px;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #909399 !important;
    font-size: 14px;
  }
}
</style>
